import ThreeBase from '../../ThreeBase';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default class ModelShow extends ThreeBase {
    private model: any;
    constructor(element: any) {
        super(element, false, 75, 10000);
        this.Init();
    }

    public ChangeImage(imageurl) {
        const texture = new THREE.TextureLoader().load(imageurl);
        this.model.traverse((child: any) => {
            if (child.isMesh) {
                child.material.map = texture;
            }
        });
    }

    private async Init(): Promise<any> {
        // this.AddbackgroundWithResource(0x989974);
        this.far = 1000;

        this.model = await this.LoadModelFBXModel('./model/ex.fbx');
        const texture = new THREE.TextureLoader().load('./images/ex_tx_C.png');
        this.model.traverse((child: any) => {
            if (child.isMesh) {
                child.material.map = texture;
            }
        });
        this.SetSize(this.model, 0.1);
        this.scene.add(this.model);

        this.AddCusControl();
    }

    private AddCusControl() {
        const controls = new OrbitControls(this.camera);
        controls.minPolarAngle = 1;
        controls.minDistance = this.near;
        controls.maxDistance = this.far;

        // controls.minAzimuthAngle = 80 * Math.PI / 180; // radians
        // controls.maxAzimuthAngle =  -230 * Math.PI / 180; // radians
        // controls.minPolarAngle = 0; // radians
        // controls.maxPolarAngle = Math.PI; // radians
        // controls.target = this.camera.position;
        controls.enablePan = true;
    }
}
